<!-- 选择账户 -->
<template>
  <ele-modal
    width="750px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="选择账户"
    @update:visible="updateVisible"
  >
    <el-form
      :hide-required-asterisk="false"
      ref="form"
      :model="form"
      label-width="70px"
      @keyup.enter.native="submit"
      @submit.native.prevent>
      <el-form-item label="账号分组" prop="groupName">
        <el-select
          style="width: 268px;"
          v-model="form.accountGroupName"
          placeholder="请选择账号分组"
          class="ele-block"
          clearable
          @clear="accountClear"
          @change="accountGroup"
        >
          <div v-for="(i,j) in groupList" :key="j">
            <el-option :label="i.groupName" :value="i" />
          </div>
        </el-select>
      </el-form-item>
      <el-form-item label="发布账户" prop="groupName">
        <el-transfer :props="{key: 'id',label: 'nickname'}" :titles="['未选择账户列表','已选择账户列表']" class="transfer-class" v-model="value" :data="accounts" @change="transferChange" style="width: 100%;">
          <!--数据项添加'头像'图片 -->
          <span slot-scope="{ option }" class="flex-align-center"><img :src="option.head" class="transfer-img" /><div class="transfer-name">{{ option.nickname }}</div></span>
        </el-transfer>
      </el-form-item>
      <div class="slecet-btn">
        <el-button @click="updateVisible(false)" size="small">取消</el-button>
        <el-button type="primary" @click="confirm" size="small">确认</el-button>
      </div>
    </el-form>
  </ele-modal>
</template>

<script>
  import {accountQuery} from "@/api/matrixManage/accountList";

  export default {
    name: "select-account",
    props: {
      // 弹窗是否打开
      visible: Boolean,
      groupList:Array
    },
    data(){
      return {
        // 穿梭框 start
        // 用户信息list
        accounts:[],
        value: [],
        // end
        form: {},
        right: [],
        rightList:[]
      }
    },
    methods: {
      //右侧数据发生变法时触发的事件，第一个参数时右侧的数据（数据的key）
      transferChange(a) {
//循环右侧数据，根据右侧数据给出的key，嵌套循环原始数据
//找到原始数据对应的项，压入right数组
        console.log('穿梭框右侧列表元素变化时触发=======',a,'this.accounts',this.accounts)
        this.rightList=a
      },


      // '穿梭框'右侧列表元素变化时触发
      transferChange2(e){
        console.log('穿梭框右侧列表元素变化时触发=======',e)
      },
      // 选择'账号分组'
      accountGroup(e){
        console.log('选择账号分组i=========',e)
        this.form.accountGroupName=e.groupName
        this.form.accountGroup=e.id
        this.value=[]
        // if(this.accounts.length>0){
          console.log("进入调用查询矩阵=====")
          this.query(e.id)
        // }
      },

      accountClear(e){
        console.log('选择账号cleari=========',e)
        this.accounts=[]

        this.form.accountGroupName=''
        this.form.accountGroup=''
        console.log('选择账号cleari22=========',this.accounts)
      },
      // 查询矩阵账号【分页查询】
      query(id){
        console.log('查询矩阵账号【分页查询】11111111111111111111111111111111 ',id)
        // 只有分组清除是，才会不传id,如果不传id则不需要查询‘穿梭框’数据
        if(!id){
          return
        }
        let parms = {
          username:this.$store.state.user.info.username,
          limit:10,
          page:1,
          type:1,  //账号类型 : 1D音2K手
          // authStatus:1, //授权状态:  0失效1正常
          groupId:id // 分组ID
        }
        accountQuery(parms)
          .then((data) => {
            this.value=[]
            this.accounts=data.list
            console.log("this.accounts",this.accounts)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      /* 确认提交 */
      confirm(){
        console.log("this.rightList.length",this.rightList.length,this.rightList)
        for (let i = 0; i < this.rightList.length; i++) {
          this.accounts.forEach((item) => {
            console.log("item.key",item.id,'this.rightList.[i]',this.rightList[i],item.id  == this.rightList[i])
            if (item.id  == this.rightList[i]) {
              this.right.push(item);
            }
          });
        }
        console.log('this.right',this.right);
        console.log("this.form",this.form)
        this.$emit('account',this.right,this.form)
        this.updateVisible(false)
      },

      clear(){
        /* 如果清空分组，则会导致父组件接受不到值，所以由父组件来调佣子组件的清空会比较好 qu*/
        // // 清空分组
        // this.form.accountGroupName=''
        // this.form.accountGroup=''
        // 查询对应分组的用户
        this.query(this.form.accountGroup)

        this.right=[] // 不清空，那么重新选择数据时，会和上一次的用户列表，数据相加
        // 清空穿梭框 数据
        this.value=[]
        this.accounts=[]
        this.rightList=[]
      },

      /* 更新 visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
    }
  }
</script>

<style scoped lang="less">
  /deep/ .el-transfer__buttons{
    padding: 0;
    text-align: center;
    button{
      margin-left: 0px;
    }
  }
  .slecet-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    button{
      width: 100px;
      height: 36px;
      border-radius: 2px;
      margin-top: 20px;
      margin-bottom: 30px;
    }
    button:first-child{
      margin-right: 46px;
    }
  }
  .transfer-class {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .transfer-img{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 15px;
    }
    .transfer-name{
      height: 30px;
      line-height: 30px;
    }
  }
</style>
